<!-- 参政议政 -->
<template>
  <Pannel @load="handleLoadData" @refresh="handleRefreshData">
    <view class="pannel-inner-box">
      <NavBar theme="#fff" title="信息详情"></NavBar>
      <image class="bg-image" :src="bg" mode="widthFix" />
      <view class="content-box">
        <view class="area-1">
          <view class="user-image">
            <image
              v-if="headers.tx"
              class="image"
              :src="joinUrl(headers.tx)"
              mode="scaleToFill"
            />
            <image
              v-else
              class="image"
              src="@/static/images/default_avator.svg"
              mode="scaleToFill"
            />
          </view>
          <view class="msg-box">
            <view class="row-top">
              <view class="user-name">{{ headers.xm }}</view>
              <view
                :class="[
                  'icon iconfont',
                  headers.xb == '男' ? 'icon-shouyezhuyetubiao06' : 'icon-nv',
                ]"
              ></view>
            </view>
            <view class="row-bottom">
              <view class="text">党籍编号：</view>
              <view class="num">{{ headers.djbh }}</view>
            </view>
          </view>
        </view>
        <view class="area-2">
          <view class="area-2-item">
            <view class="text">性别</view>
            <view class="num">{{ headers.xb }}</view>
          </view>
          <view class="area-2-item">
            <view class="text">种族</view>
            <view class="num">{{ headers.mz }}</view>
          </view>
          <view class="area-2-item">
            <view class="text">年龄</view>
            <view class="num">{{ headers.nl }}</view>
          </view>
          <view class="area-2-item time">
            <view class="text">入民革时间</view>
            <view class="num">{{ headers.rmgsj }}</view>
          </view>
        </view>
        <DetailCard class="area-3" width="686rpx">
          <view class="list">
            <view class="item" v-for="(item, index) of lists1" :key="index">
              <view class="text">{{ item.name }}</view>
              <view class="num">{{ item.value }}</view>
            </view>
          </view>
        </DetailCard>
        <DetailCard class="area-4" width="686rpx">
          <view class="list">
            <view class="item" v-for="(item, index) of lists2" :key="index">
              <view class="title">{{ item.name }}</view>
              <TextLoad style="width: 100%" :text="item.value"></TextLoad>
            </view>
          </view>
        </DetailCard>
      </view>
    </view>
  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/detail_bg";

import DetailCard from "./components/DetailCard.vue";
import TextLoad from "./components/TextLoad.vue";

import { joinUrl } from "@/utils/tools";
import useDetail from "@/store/detail";
import { requestPost } from "@/hooks/api";

import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
import func from "vue-temp/vue-editor-bridge";

const [detail, setDetail] = requestPost(
  "/ascreen/home/partyMemberHomeInfo/ajax"
);

const [_data] = useDetail();

const onJump = (data: any) => {
  uni.navigateTo(data);
};

const handleRefreshData: any = (callback: any) => {
  callback(fetchData);
};

const handleLoadData: any = (callback: any): any => {
  callback(fetchData);
};

async function fetchData() {
  await setDetail({ id: _data.value });
  formatData();
}

let headers = ref({}) as any;
const lists1 = ref([]) as any;
const lists2 = ref([]) as any;
function formatData() {
  const _data: any = detail.value.data || {};

  headers.value = {
    xm: _data.xm,
    tx: _data.tx,
    xb: _data.xb,
    mz: _data.mz,
    nl: _data.nl,
    djbh: _data.djbh,
    rmgsj: _data.rmgsj,
  };

  lists1.value = [
    { name: "籍贯", value: _data.jg },
    { name: "最高学历", value: _data.zgxl },
    { name: "党籍编号", value: _data.djbh },
    { name: "委员会", value: _data.wyh },
    { name: "基层组织", value: _data.jczz },
    { name: "出生年月", value: _data.csrq },
    { name: "最高学历毕业学校", value: _data.zgxlbyxx },
    { name: "最高学位", value: _data.zgxw },
    { name: "职称", value: _data.zw },
    { name: "职称级别", value: _data.zcjb },
    { name: "参加工作时间", value: _data.cjgzsj },
    { name: "民革特色", value: "江苏泰州" },
    { name: "界别", value: _data.jb },
    { name: "中上层人士", value: _data.zscrs ? "是" : "否" },
    { name: "联系方式", value: _data.sj },
  ];

  lists2.value = [
    { name: "工作单位及职务", value: _data.gzdw + _data.zw },
    { name: "民革现任职务", value: _data.mgxrzw },
    { name: "人大政协现任职务", value: _data.rdzxxrzw },
    { name: "社会兼职", value: _data.shjz },
  ];
}
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 222rpx;
    z-index: 1;

    .area-1 {
      display: flex;
      align-items: center;
      width: 686rpx;
      margin-left: 40rpx;

      .user-image {
        width: 120rpx;
        height: 120rpx;
        border: 2rpx solid #ffffff;
        border-radius: 50%;
        box-sizing: border-box;
        overflow: hidden;
      }

      .msg-box {
        margin-left: 32rpx;

        .row-top {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          color: #ffffff;

          .icon {
            margin-left: 20rpx;
          }
        }

        .row-bottom {
          display: flex;
          margin-top: 20rpx;
          padding: 0 20rpx;
          height: 34rpx;
          font-size: 24rpx;
          color: #71411b;
          background: #ffffff;
          border-radius: 17rpx;
        }
      }
    }

    .area-2 {
      display: flex;
      align-items: center;
      margin-top: 54rpx;
      width: 686rpx;
      height: 188rpx;
      background: linear-gradient(
        183deg,
        rgba(255, 250, 245, 0.55) 1%,
        rgba(255, 253, 246, 0.74) 44%,
        #ffffff 96%
      );
      border: 3rpx solid #ffffff;
      border-radius: 20rpx;

      .area-2-item {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        border-right: 1rpx solid #dbab78;

        .num {
          margin-top: 20rpx;
          color: #71411b;
          font-weight: bold;
        }

        &.time {
          flex: 3;
          border-right: none;
        }
      }
    }

    .area-3 {
      .list {
        width: 100%;
        font-size: 28rpx;

        .item {
          display: flex;
          width: 100%;
          justify-content: space-between;
          margin-bottom: 24rpx;

          .num {
            color: #666666;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .area-4 {
      font-size: 28rpx;
      .list {
        width: 100%;
        .item {
          margin-bottom: 32rpx;

          .title {
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }
}
</style>
